<template>
    <page-wrapper>
        <table-search @search="search(1)" :isSearch="false" @reset="reset()">
            <template slot="form">
                <form-item label="">
                    <a-input v-model.trim="form.menuName" placeholder="菜单名称" />
                </form-item>
            </template>
            <template slot="extra">
                <a-button class="filter-item" :disabled="hasPerm(['sys:menu:add'])" type="primary" icon="plus" @click="addInfo()">新增菜单</a-button>
            </template>
        </table-search>
        <table-list :data="list" :columns="columns" rowKey="menuId" :loading="loading" :pagination="false">
            <template slot="icon" slot-scope="{ text }">
                <svg-icon v-if="text.icon" :icon="text.icon" />
            </template>
            <template slot="menuType" slot-scope="{ text }">
                <dict-tag :options="menuTypes" :value="text.menuType"></dict-tag>
            </template>
            <template slot="isUniq" slot-scope="{ text }">
                <dict-tag :options="isSuperTypes" :value="text.isUniq"></dict-tag>
            </template>
            <template slot="path" slot-scope="{ text }">
                {{text.menuType!="F"?text.path:''}}
            </template>
            <template slot="permission" slot-scope="{ text }">
                {{text.menuType=='F'?text.path:''}}
            </template>
            <template slot="status" slot-scope="{ text }">
                <a-switch
                    checked-children="正常"
                    un-checked-children="禁用"
                    :key="text.tenantId"
                    :default-checked="text.status==1 ? true : false"
                    @change="onSwitchStatus(text)"
                />
            </template>
            <div slot="action" slot-scope="{ text }">
                <a-button type="primary" size="small" :disabled="hasPerm(['sys:menu:update'])" @click="addInfo(text)">
                    编辑
                </a-button>
                <a-button type="primary" size="small" :disabled="hasPerm(['sys:menu:add'])" @click="addMenu(text)" style="margin-left:8px">
                    新增
                </a-button>
                <a-button
                    type="danger"
                    size="small"
                    @click="remove(text)"
                     :disabled="hasPerm(['sys:menu:remove'])"
                    style="margin-left:8px"
                >
                    删除
                </a-button>
            </div>
        </table-list>

        <template v-if="isShowInfo">
            <menu-info :list="list" :info="itemInfo" @cancel="isShowInfo = false" @submit="submit"/>
        </template>
    </page-wrapper>
</template>

<script>
import table from '@/mixins/table';
import { columns } from './columns';
import MenuInfo from './components/info';
import {remoteList,deleteInfo,updateInfo} from '@/api/system/menu'
import {menuTypes,isSuperTypes} from './dictionary'

export default {
    name: 'Menus',
    mixins:[table],
    components: {
        MenuInfo
    },
    data() {
        let originForm = {
            menuName:''
        }
        return {
            loading: false,
            originForm,
            menuTypes,
            isSuperTypes,
            form:{
                ...originForm,
                size:1000
            },
            list: [],
            columns,
            itemInfo: null,
            isShowInfo: false
        };
    },
    created(){
        this.search(1)
    },
    methods: {
        async search(page){
            try{
                this.loading = true;
                if(page){
                    this.form.page = page
                }
                this.list = []
                let res = await remoteList(this.form);
                let { data } = res;
                this.list = data;
                this.selectionBox = []
            }finally{
                this.loading = false
            }
        },
        //新增菜单
        addInfo(item={}){
            this.isShowInfo = true;
            this.itemInfo = item;
        },
        addMenu(item){
            this.isShowInfo = true;
            let {menuType,menuId,parentId} = item;
            let type = 'F';
            let id = parentId;
            if(menuType=='M'){
                type = 'C'
            }
            if(menuType!="F"){
                id = menuId
            }
            this.itemInfo = {
                parentId:id,
                menuType:type
            };
        },
        remove(item){
            this.$confirm({
                title: '提示',
                content: '确定要删除该菜单吗？',
                okText: '确定',
                cancelText: '取消',
                onOk:async ()=>{
                    try{
                        await deleteInfo({ids:[item.menuId]});
                        this.$message.success('删除成功!');
                        this.search(1);
                    }catch(err){

                    }
                },
                onCancel() {}
            });
        },
        submit(){
            this.isShowInfo = false;
            this.search(1)
        },
        //是否开启
        async onSwitchStatus(item) {
            try {
                let { status } = item;
                item.status = status==1 ? 0 : 1;
                this.loading = true;
                await updateInfo(item);
                this.$message.success('操作成功!');
            } catch (err) {
                let { status } = item;
                item.status = status ? 0 : 1;
            } finally {
                this.loading = false;
            }
        },
    }
};
</script>
<style lang="scss" scoped>
.btn-wrap{
    margin-bottom: 20px;
}
</style>
